<template>
	<uni-card style="border-radius: 20px;" v-if="sessionInfo">
		<uni-row>
			<uni-col :offset="18" :span="2">
				<span>
					<uni-icons type="notification" size="30"></uni-icons>
				</span>
			</uni-col>
			<uni-col :span="4">
				<uni-countdown fontSize="20" :show-day="false" :minute="15" :second="0" @timeup="overTime()">
				</uni-countdown>
			</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="24">
				<p>
					<span style="font-size: 25px;font-weight: bold;">{{sessionInfo.movie.movieName}}</span>
					<span style="margin-left: 10px;">
						<uni-icons type="flag-filled" size="25" color="#ff557f"></uni-icons>
					</span>
					<span style="font-size: 25px;">{{orderList.length}}张</span>
				</p>
			</uni-col>
			<uni-col :span="24">
				<p style="font-size: 25px;margin-top: 10px;">
					<span>{{utils.moment(sessionInfo.movieSession.startTime).format("HH:mm")}}</span>
					<span>-</span>
					<span>{{utils.moment(sessionInfo.movieSession.endTime).format("HH:mm")}}</span>
					<span></span>
					<span>{{utils.moment(sessionInfo.movieSession.startTime).format(" [今天] M 月D 日")}}</span>
				</p>
			</uni-col>
			<uni-col :span="8" v-for="(item,index) in orderList">
				<uni-card>
					<span style="font-size: 20px;">{{item.row}}排 {{item.col}}座</span>
				</uni-card>
			</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="8">
				<p style="font-size: 19px;font-weight: bold;">
					<span>总计金额:</span>
					<span style="color: #ff557f;">￥</span>
					<span style="color:#ff557f;font-size: 30px;">
						{{getMoney()}}
					</span>
				</p>
				<p>实际优惠以确认订单为准</p>
			</uni-col>
			<uni-col :span="8">
				<p style="text-align: center;padding: 10px;cursor: pointer;" @click="openPopup">
					<span>明细</span>
					<uni-icons type="bottom"></uni-icons>
				</p>
			</uni-col>
			<uni-col :span="8">
				<button style="background-color: #ff557f;color: white;font-weight: bold;" @click="submit()">
					确认订单
				</button>
			</uni-col>
		</uni-row>
	</uni-card>
	<uni-popup ref="popupRef" type="bottom">
		<uni-card style="padding: 0;margin: 0;border-radius: 30px 30px 0 0" title="支付明细">
			<uni-card>
				<uni-row v-for="(item,index) in orderList" style="font-size: 20px;margin-top: 20px;">
					<uni-col :span="12">
						<p>
							<span>{{item.row}}排</span>
							<span>{{item.col}}座</span>
						</p>
					</uni-col>
					<uni-col :span="12" style="text-align: right;">
						<p>
							<span>￥</span>
							<span
								style="font-weight: bold;font-size: 30px;">{{sessionInfo.movieSession.sessionPrice}}</span>
						</p>
					</uni-col>
				</uni-row>
			</uni-card>
			<uni-row>
				<uni-col :span="12" style="margin-top: 10px;">
					<p style="font-size: 20px;">实付</p>
				</uni-col>
				<uni-col :span="12" style="text-align: right;margin-top: 10px;">
					<p>
						<span>(含服务费)</span>
						<span style="color: #ff557f;">￥</span>
						<span style="font-weight: bold;font-size: 30px;color: #ff557f;">{{getMoney()}}</span>
					</p>
				</uni-col>
				<uni-col :span="12" style="margin-top: 10px;">
					<p style="font-size: 20px;">影票原价</p>
				</uni-col>
				<uni-col :span="12" style="text-align: right;margin-top: 10px;">
					<p>
						<span>￥</span>
						<span style="font-weight: bold;font-size: 25px">{{getMoney()}}</span>
					</p>
				</uni-col>
				<uni-col :span="12" style="margin-top: 10px;">
					<p style="font-size: 20px;">卖品原价</p>
				</uni-col>
				<uni-col :span="12" style="text-align: right;margin-top: 10px;">
					<p>
						<span>￥</span>
						<span style="font-weight: bold;font-size: 25px;">{{getMoney()}}</span>
					</p>
				</uni-col>
				<uni-col :span="12" style="margin-top: 10px;">
					<p style="font-size: 20px;">优惠金额</p>
				</uni-col>
				<uni-col :span="12" style="text-align: right;margin-top: 10px;">
					<p>
						<span>￥</span>
						<span style="font-weight: bold;font-size: 30px;color: #ff557f;">-{{0}}</span>
					</p>
				</uni-col>
			</uni-row>
		</uni-card>
	</uni-popup>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import utils from '../../../utils'
	import api from '../../../api/api'
	const popupRef = ref()
	const sessionInfo = ref()
	const orderList = ref()
	onMounted(() => {
		uni.getStorage({
			key: 'order',
			success: function(res) {
				sessionInfo.value = res.data.sessionInfo
				orderList.value = res.data.orderList
			}
		})
	})
	const overTime = () => {
		uni.showToast({
			title: '订单超时',
			icon: 'error'
		})
	}
	const getMoney = () => {
		return orderList.value.length * sessionInfo.value.movieSession.sessionPrice
	}
	const openPopup = () => {
		// console.log(popupRef.value)
		popupRef.value.open('bottom')
	}
	const submit = () => {
		let userId = 0;
		console.log(uni.getStorage({
			key: 'userInfo',
			success: function(res) {
				userId = res.data.user.userId
			}
		}))
		uni.showLoading({
			title: '正在创建订单'
		});
		api.order.createMovieOrder({
			userId: userId,
			movieName:sessionInfo.value.movie.movieName,
			movieImage:sessionInfo.value.movie.movieImage,
			sessionId: sessionInfo.value.movieSession.sessionId,
			totalPrice: getMoney(),
			selectTable: orderList.value
		}).then(res => {
			if (res.data.code == 0) {
				setTimeout(function() {
					uni.hideLoading();
					uni.showToast({
						title:'创建成功'
					})
					uni.navigateBack({
						delta: 2
					});
				}, 1000);

			}
		})
	}
</script>

<style>
</style>
